﻿@inherits UiComponentBase

<CascadingValue IsFixed="true" Value="this">@ChildContent</CascadingValue>

<nav class=@ClassNames("flex", Class) aria-label="Breadcrumb">
    <ol role="list" class="flex items-center space-x-4">
        <li>
            <div>
                <a href=@HomeHref class="text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400" title=@HomeLabel>
                    <!-- Heroicon name: mini/home -->
                    <svg class="h-6 w-6 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z" clip-rule="evenodd" />
                    </svg>
                    <span class="sr-only">@HomeLabel</span>
                </a>
            </div>
        </li>

        @foreach (var link in Links)
        {
            <li>
                <div class="flex items-center">
                    <!-- Heroicon name: mini/chevron-right -->
                    <svg class="h-6 w-6 flex-shrink-0 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
                    </svg>
                    @if (!string.IsNullOrEmpty(link.href))
                    {
                        <a href=@link.href class="ml-4 text-lg font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300" title=@link.title>@link.ChildContent</a>
                    }
                    else
                    {
                        <span class="ml-4 text-lg font-medium text-gray-700 dark:text-gray-300" title=@link.title>@link.ChildContent</span>
                    }
                </div>
            </li>
        }
    </ol>
</nav>
